<template>
	<view class="warp-login">
		<view class="warp-login__title">欢迎登录</view>
		<u--form labelPosition="left" :model="formData" :rules="rules" ref="formData" labelWidth="50" labelAlign="right">
			<u-form-item label="账号" prop="username" borderBottom ref="item1" >
				<u--input v-model="formData.username" border="none" clearable></u--input>
			</u-form-item>
			<u-form-item label="密码" prop="password" borderBottom ref="item1" >
				<u--input v-model="formData.password" type="password" border="none" clearable></u--input>
			</u-form-item>
			<view class="warp-login__but">
				<u-button type="error" text="立即登录" @click="onSubmit"></u-button>
				<view class="warp-login__but-reg" @click="toReg">立即注册</view>
			</view>
		</u--form>
		<!-- <view>
			<u-row justify="space-between" gutter="10" >
				<u-col span="4">
					<view class="warp-login__grid">
						<u-icon name="facebook-circle-fill" size="45" color="#ff9900"></u-icon>
						<text class="warp-login__grid__text">免密登录</text>
					</view>
				</u-col>
				<u-col span="4">
					<view class="warp-login__grid">
						<u-icon name="weixin-circle-fill" size="45" color="#5ac725"></u-icon>
						<text class="warp-login__grid__text">微信登录</text>
					</view>
				</u-col>
				<u-col span="4">
					<view class="warp-login__grid">
						<u-icon name="qq-circle-fill" size="45" color="#3c9cff"></u-icon>
						<text class="warp-login__grid__text">QQ登录</text>
					</view>
				</u-col>
			</u-row>
		</view> -->
		<view class="warp-login__footer">
			登录即表示同意<text class="warp-login__footer__text">《用户服务协议》</text>和<text class="warp-login__footer__text">《隐私政策》</text>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				regUserAgreement:[],
				regPrivacyAgreement:[],
				formData:{
					username:'',
					password:'',
					user_random:''
				},
				rules:{
					username: [
						{
							type: 'string',
							required: true,
							message: '请填写用户名',
							trigger: ['blur', 'change']
						}
					],
					password: [
						{
							type: 'string',
							required: true,
							message: '请填写密码',
							trigger: ['blur', 'change']
						},
						{
							min: 6,
							max: 16,
							message: '密码长度在6-16个字符之间'
						}
					]
				}
			}
		},
		onLoad(opt){
			// if(opt.random) {
			// 	this.formData.user_random = opt.random;
			// }
			
			// if(getAppstr()) {
			// 	this.toIndex();
			// 	return false;
			// }
		},
		onReady(){
			this.$refs.formData.setRules(this.rules);
		},
		methods: {
			toReg(){
				uni.$u.route({
					url:'pages/login/reg',
					params:{
						random : this.formData.user_random
					}
				})
			},
			initInfo(){
				getAgreement().then(res=>{
					if(res.code === 200) {
						this.regUserAgreement = res.data.regUserAgreement;
						this.regPrivacyAgreement = res.data.regPrivacyAgreement;
					}else{
						uni.$u.toast(res.message);
					}
				}).catch(err=>{
					uni.$u.toast(`页面错误！${JSON.stringify(err)}`);
				})
			},
			onSubmit(){
				this.$refs.formData.validate().then(res => {
					this.$store.dispatch('user/login',this.formData).then(res=>{
						if(res.code === 200) {
							uni.$u.toast('登录成功！')
							this.toIndex();
						}else{
							uni.$u.toast(res.message);
						}
					}).catch(err => {
						console.log(err);
						uni.$u.toast(`页面错误！${err}`);
					});
					
				}).catch(errors => {
					uni.$u.toast('请认真填写必填字段！')
				})
			},
			toIndex(){
				uni.reLaunch({
					url: '/pages/index/index',
					success: (e) => {
						console.log(e)
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.warp-login{
		padding: 20rpx;
		&__title{
			font-size: 45rpx;
			line-height: 45rpx;
			padding: 30rpx 0 50rpx 0;
		}
		&__but{
			padding: 80rpx 0;
		}
		&__but-reg{
			font-size: 26rpx;
			line-height: 60rpx;
			text-align: center;
			margin-top: 20rpx;
			color: $u-primary;
		}
		&__grid{
			align-items: center;
			justify-content: center;
			position: relative;
			flex-direction: column;
			box-sizing: border-box;
			display: flex;
			&__text{
				margin-top:10rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: $u-content-color;
			}
		}
		&__footer{
			position: fixed;
			bottom: 20rpx;
			left: 0;
			right: 0;
			text-align: right;
			font-size: 24rpx;
			padding: 10rpx 30rpx;
			&__text{
				color: $u-primary;
				font-weight: bold;
			}
		}
	}
	
</style>
